<template>
  <div class="login-wrapper">
    <div class="input-wrapper">
      <h1 class="big-title text-center">
        <span class="italic">XYTAdmin</span>后台管理系统
      </h1>
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-4 control-label">账号</label>
          <div class="col-sm-4">
           <input type="text" class="form-control" placeholder="账号">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label">密码</label>
          <div class="col-sm-4">
            <input type="password" class="form-control" placeholder="密码">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label">验证码</label>
          <div class="col-sm-4">
            <input class="form-control" type="text">
          </div>
          <div class="col-sm-4">
            <div>qqfr</div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-4 col-sm-4">
            <div class="checkbox">
              <label>
                <input type="checkbox"> 记住密码
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-4 col-sm-4">
            <button class="btn btn-primary btn-block" @click="login">登陆</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'login',
  methods: {
    ...mapActions(['loginA']),
    login () {
      this.loginA(1)
      this.$router.push('/admin/home')
    }
  }
}
</script>

<style lang="less" scoped>
  .login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: url('https://www.xinyingtong.cn/assets/img/loginbg.jpg') no-repeat center center;
    background-size: cover;
    .input-wrapper {
      width: 600px;
      height: 400px;
      padding: 15px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 8px rgba(0,0,0,0.2);
      color: #333;
      .big-title {
        color: #333;
        .italic {
          font-style: italic;
        }
      }
    }
  }
</style>
